import { useLocation, Outlet, useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { Menu, Row, Col, Breadcrumb } from 'antd';
import {
  HomeOutlined,
  FileTextOutlined,
  UnorderedListOutlined,
  UserOutlined,
  UserSwitchOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';

const { SubMenu } = Menu;

const User = () => {
  const location = useLocation();

  const navigate = useNavigate();
  const [currentKey, setCurrentKey] = useState('certification');
  const handleClick = ({ key }) => {
    console.log(key);
    setCurrentKey(key);
    navigate(`/user/${key}`);
  };

  const gotoHome = () => {
    navigate(`/`);
  };

  useEffect(() => {
    if (location.pathname.indexOf('certification') !== -1) {
      setCurrentKey('certification');
    } else if (location.pathname.indexOf('order') !== -1) {
      setCurrentKey('order');
    } else if (location.pathname.indexOf('patient') !== -1) {
      setCurrentKey('patient');
    } else if (location.pathname.indexOf('profile') !== -1) {
      setCurrentKey('profile');
    } else if (location.pathname.indexOf('feedback') !== -1) {
      setCurrentKey('feedback');
    } else if (location.pathname.indexOf('patientUpdate') !== -1) {
      setCurrentKey('patient');
    } else if (location.pathname.indexOf('orderDetail') !== -1) {
      setCurrentKey('order');
    }
  }, [location]);

  return (
    <div className='content-container'>
      <div className='content'>
        <Breadcrumb className='m-20'>
          <Breadcrumb.Item onClick={gotoHome}>
            <HomeOutlined />
          </Breadcrumb.Item>
          <Breadcrumb.Item>会员中心</Breadcrumb.Item>
        </Breadcrumb>
        <Row>
          <Col span={4}>
            <Menu
              selectedKeys={currentKey}
              style={{ width: '100%' }}
              mode='vertical'
              onClick={handleClick}
            >
              <Menu.Item icon={<FileTextOutlined />} key='certification'>
                实名认证
              </Menu.Item>
              <Menu.Item icon={<UnorderedListOutlined />} key='order'>
                挂号订单
              </Menu.Item>
              <Menu.Item icon={<UserOutlined />} key='patient'>
                就诊人管理
              </Menu.Item>
              <Menu.Item icon={<UserSwitchOutlined />} key='profile'>
                帐号信息
              </Menu.Item>
              <Menu.Item icon={<QuestionCircleOutlined />} key='feedback'>
                意见反馈
              </Menu.Item>
            </Menu>
          </Col>
          <Col span={20}>
            <Outlet />
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default User;
